<template>
  <div class="index">
    <el-container>
      <el-header height="68px">
        <m-header></m-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <m-aside></m-aside>
        </el-aside>
        <el-main>
          <div class="main">
            <div class="header-top">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>红包明细</el-breadcrumb-item>
                <el-breadcrumb-item>查看红包</el-breadcrumb-item>
              </el-breadcrumb>
              <h2 class="title">查看红包</h2>
            </div>
            <div class="row">
              
         
              <el-form ref="form"  :model="sizeForm" label-width="120px" size="small">
                <el-form-item label="红包名称：">
                  <el-input class="input" v-model="sizeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="红包类型：">
                  <el-select v-model="sizeForm.type" placeholder="请选择红包类型">
                    
                  </el-select>
                </el-form-item>
                <el-form-item label="红包状态：">
                  <el-select v-model="sizeForm.status" placeholder="请选择红包状态">
                    
                  </el-select>
                </el-form-item>
                <el-form-item label="开启时间：">
                  <el-col :span="11">
                    <el-date-picker type="datetime" placeholder="选择日期" v-model="sizeForm.date" ></el-date-picker>
                  </el-col>
                </el-form-item>
                <el-form-item label="红包金额：">
                  <el-input class="input" v-model="sizeForm.money"></el-input>
                  <span class="mrL"> 元</span>
                </el-form-item>
                <el-form-item label="红包总数：">
                  <el-input class="input" v-model="sizeForm.num"></el-input>
                  <span class="mrL"> 个</span>
                </el-form-item>
                <el-form-item label="剩余红包：">
                  <el-input class="input" v-model="sizeForm.total"></el-input>
                  <span class="mrL"> 个</span>
                </el-form-item>
                <el-form-item label="红包图片：">
                  <img :src="sizeForm.pic" class="pic"   />
                </el-form-item>
                <el-form-item label="创建/更新时间：">
                  <span v-text="sizeForm.time"></span>
                </el-form-item>
                <el-form-item size="large">
                  <el-button type="primary" class="button" @click="back">返回</el-button>
                </el-form-item>
              </el-form>  

            </div>

          </div>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>
<script>
import { getCookie } from "./until/index";

export default {
  data() { 
    
    return {
      hongbaoID:'',
      sizeForm: {
          name:'',
          type: '',
          status:'',
          date: '',
          money:'',
          num:'',
          total:'',
          pic: '',
          time: '',
        }

    };
  },
  created() {
    this.hongbaoID = this.$route.params.hongbaoID;
    var type = '',
        status = '';
    this.$ajax.get("admGetHongbaoDetail.ashx?uid=" +getCookie("userid") +"&token=" +getCookie("token")+'&hongbaoID='+this.hongbaoID)
      .then(res => {
        if (res.data.code === "200") {
          var data = res.data.data;
          
          if(data.hongbaoType == 0){
            type = '新人红包'
          }else if(data.hongbaoType == 1){
            type = '定时红包'
          }else if(data.hongbaoType == 2){
            type = '转发红包'
          }else if(data.hongbaoType == 3){
            type = '瓜分红包'
          }else if(data.hongbaoType == 4){
            type = '收徒红包'
          }
          
          if(data.hongbaoStatus == 'WF'){
            status = '等待中'
          }else if(data.hongbaoStatus == 'NG'){
            status = '进行中'
          }else if(data.hongbaoStatus == 'FN'){
            status = '已结束'
          }
          this.sizeForm.name = data.hongbaoTitle;
          this.sizeForm.type = type;
          this.sizeForm.status = status;
          this.sizeForm.date = data.startDate;
          this.sizeForm.money = data.hongbaoTotalAmt;
          this.sizeForm.num = data.hongbaoQty;
          this.sizeForm.total = data.remainHongbaoQty;
          this.sizeForm.pic = data.hongbaoImgUrl;
          this.sizeForm.time = data.createDate + ' / ' + data.updateDate;

        } else {
          this.$message.error(res.data.msg );
        }
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    back(){
      this.$router.go(-1)
    }
    
 
  }
};
</script>
<style scoped>
.index {
  overflow: hidden;
}
.el-header {
  background-color: #3a4759;
  color: #fff;
}
.el-aside {
  background-color: #485668;
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
}
.button{padding: 12px 65px}
.mrL{margin-left: 10px}
.pic{display: inline-block;width: 300px;vertical-align: middle}
.el-main {
  background-color: #f0f2f5;
  color: #333;
  text-align: center;
  height: 100%;
  min-height: 740px
}
.input{
  width: 220px
}
.header-top{
  margin: -20px -20px 20px;
  padding: 15px 20px;
  background: #fff;
  
}
.header-top .title{
  margin:15px 0 0;
  font-weight: 600;
  text-align: center;
  font-size: 20px;
}
.row{
  background: #fff;
  padding: 20px 30px;
  text-align: left
}
.block {
  padding: 20px;
}
.message{
  margin-top: 20px;
}
</style>
  